<template>
	<view class="studyListPage">
		<view class="searchContent">
			<u-input v-model="keyWord" shape="circle" inputAlign="center" placeholder="搜索" @confirm="doSearch">
				<view slot="suffix" class="iconClass" @click="doSearch">
					<u-icon name="search" color="#004DA1" size="52rpx"></u-icon>
				</view>
			</u-input>
		</view>
		<view class="tabAndFilter" v-if="isLoad">
			<view class="tabContent">
				<view @click="doFilter(item)" v-for="(item,index) in tabs" :key="index" class="tabItem"
					:class="activeTab===item.id?'isActive':''">{{item.classificationName}}</view>
			</view>
		</view>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
			v-if="!list3.length && !isLoading && isLoad" text="没有更多了"></u-empty>
		<view class="studyMovie" v-if="isLoad">
			<view class="studyList" v-for="(item,index) in list3" :key="index" @click="goDetail(item.id)">
				<view class="image">
					<u--image :src="baseUrl+'/sys/common/static/'+item.images" shape="square" mode="aspectFill" width="320rpx"
						height="226rpx" radius="8rpx 8rpx 0 0">
					</u--image>
					<view class="movieStatus">
						<u--image src="/static/growup/1.png" shape="square" mode="aspectFill" width="88rpx"
							height="88rpx" radius="12rpx">
						</u--image>
					</view>
				</view>
				<view class="studyInfo">
					<view class="title">{{item.curriculumName}}</view>
					<view class="statics">
						<view>{{item.curriculumAuthor}}</view>
						<view class="total">累计：{{item.views||0}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="list3.length" :status="isFinish?'nomore':'loading'" loading-text="正在加载" loadmore-text="加载更多"
			nomore-text="没有更多了" color="#d0d0d0" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$api.baseUrl,
				keyWord: "",
				activeTab: "",
				tabs: [],
				list3: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				isFinish: false,
				isLoading: false,
				isLoad: false,
				userId:""
			}
		},
		onReachBottom() {
			if (!this.isLoading && !this.isFinish) {
				this.pageNo++;
				this.initData();
			}
		},
		onPullDownRefresh() {
			this.doSearch();
		},
		onLoad() {
			uni.getStorage({
				key: "userInfo",
				success: (userInfo) => {
					this.userId = userInfo.data.id;
					this.$request.get(this.$api.studyColumnList, {
						pageNo: 1,
						pageSize: 100
					}).then(res => {
						this.tabs = res.result.records;
						this.tabs.unshift({
							classificationName: "全部",
							id: ""
						})
						//this.activeTab = this.tabs[0].id;
						this.initData();
						uni.hideLoading()
					})
				}
			})
		},
		methods: {
			initData(isRefresh) {
				this.isLoading = true;
				Promise.all([
					this.$request.get(this.$api.studyList, {
						type: '1',
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						consultingId: this.activeTab,
						curriculumName: this.keyWord,
						userId:this.userId
					}),
				]).then(res => {
					if (isRefresh) {
						uni.stopPullDownRefresh()
					}
					this.isLoading = false;
					this.list3 = this.list3.concat(res[0].result.records)
					this.total = res[0].result.total;
					if (this.pageNo * this.pageSize < this.total) {
						this.isFinish = false
					} else {
						this.isFinish = true
					}
					this.isLoad = true;
					uni.hideLoading()
				})
			},
			doSearch() {
				this.isFinish = false;
				if (!this.isLoading) {
					this.pageNo = 1;
					this.list3 = [];
					this.initData(true);
				}
			},
			doFilter(item) {
				if (this.activeTab === item.id) return;
				this.activeTab = item.id;
				this.doSearch()
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/studyDetail/studyDetail?id=" + id
				})
			}
		}
	}
</script>


<style lang="scss">
	.studyListPage {
		.searchContent {
			padding: 0rpx 40rpx 26rpx;
			background-color: #FAFAFA;

			.iconClass {
				border-left: 1rpx solid #D0D0D0;
				padding: 0 0 0 38rpx;
			}
		}

		.tabAndFilter {
			display: flex;
			justify-content: flex-start;

			.tabContent {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				padding: 0 40rpx 20rpx;
				width: calc(100vw - 120rpx);
				overflow: auto;

				.tabItem {
					background: #F4F4F4;
					border-radius: 4px 4px 4px 4px;
					color: #333333FF;
					font-size: 26rpx;
					height: 62rpx;
					padding: 0 20rpx;
					line-height: 62rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
				}

				.isActive {
					color: #004DA1FF;
					background-color: #E5EDFFFF;
				}
			}

		}

		.studyMovie {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 40rpx;

			.studyList {
				display: flex;
				flex-direction: column;
				width: 320rpx;
				background-color: #fff;
				margin-bottom: 30rpx;
				border-radius: 8rpx;

				.image {
					position: relative;

					.movieStatus {
						position: absolute;
						left: calc(50% - 44rpx);
						top: calc(50% - 44rpx);
					}
				}

				.studyInfo {
					padding: 24rpx 24rpx 20rpx;

					.title {
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						font-size: 26rpx;
						line-height: 36rpx;
						height: 72rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.statics {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;
						margin-top: 20rpx;

						.total {
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>
